@charset 'utf-8';
@import './variables.scss';

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    // !global 把局部变量提升为全局变量
    $theme-map: $theme-map !global;
    // 判断html中data-theme的属性值 #{}是sass的插值表达式
    // & sass中的父容器标识， @content 混合器插槽，类似vue的slot
    [data-theme='#{$theme-name}'] & {
      @content;
    }
  }
}

// 声明一个根据key获取颜色的function
@function themed($key) {
  // 返回$map中，$key对应的value值
  @return map-get($map: $theme-map, $key: $key);
}

@mixin bg_color($color, $opacity: 1) {
  $tmp_opa: 1 - $opacity;
  @include themeify {
    background-color: transparentize(
      $color: themed($color),
      $amount: $tmp_opa
    ) !important;
  }
}

// 获取字体颜色
@mixin font_color($color, $opacity: 1) {
  $tmp_opa: 1 - $opacity;
  @include themeify {
    color: transparentize($color: themed($color), $amount: $tmp_opa) !important;
    // color: themed($color) ;
  }
}

/**
 * @description: 获取边框颜色
 * @param {*$color 边框颜色, $opacity透明度 $width边框宽度, $type边框类型}
 * @param $top|right|bottom|left是否有上|右|下|左边框，默认值为空，即所有方向均有边框。传入none则代表无此方向边框
 * @return {*}
 */
@mixin border(
  $color,
  $opacity: 1,
  $width: 1px,
  $type: solid,
  $top: '',
  $right: '',
  $bottom: '',
  $left: ''
) {
  $tmp_opa: 1 - $opacity;

  @include themeify {
    border-width: $width;
    border-style: $type;
    border-color: transparentize(
      $color: themed($color),
      $amount: $tmp_opa
    ) !important;
    border-top: $top;
    border-right: $right;
    border-bottom: $bottom;
    border-left: $left;
  }
}




/**
 * @description: 设置边框颜色
 * @param {*$color 边框颜色, $opacity透明度}
 * @param 
 * @return {*}
 */
@mixin border_color($color, $opacity: 1) {
  $tmp_opa: 1 - $opacity;
  @include themeify {
    border-color: transparentize(
      $color: themed($color),
      $amount: $tmp_opa
    ) !important;
  }
}


@mixin theme-button($color) {
  border-radius: 5px;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: inset 0px 0px 15px $color !important;
  &:hover {
    background: rgba($color: #fff, $alpha: 0.2) !important;
  }
}
@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}
@mixin scrollBar2 {
  &::-webkit-scrollbar-track-piece {
    background: rgba($color: #184361, $alpha: 0.1);
  }

  &::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba($color: #a9c8df, $alpha: 1);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
  }
}
@mixin scrollBar3 {
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba($color: #000, $alpha: 0.2);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
  }
}

@mixin font-dpr($font-size) {
  font-size: $font-size;

  [data-dpr='2'] & {
    font-size: $font-size * 2;
  }

  [data-dpr='3'] & {
    font-size: $font-size * 3;
  }
}
/**
 * @description: 设置通用弹性布局样式
 * @param 
 * @param 
 * @return {*}
 */
 @mixin flex-style {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}
